<template>
  <div style="width: 100%;height: 100vh">
    <div
      v-if="configData.layer"
      class="topo-render"
      :style="layerStyle"
    >
      <template v-for="(component,index) in configData.components">
        <div
          v-show="component.style.visible === undefined ? true : component.style.visible"
          :key="index"
          class="topo-render-wrapper"
          :class="{'topo-render-wrapper-clickable': component.action.length > 0 }"
          :style="component | parseComponentStyle"
          @click="doClickComponent(component)"
          @dblclick="doDbClickComponent(component)"
        >
          <component :is="parseView(component)" ref="spirit" :detail="component" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import TopoBase from './TopoBase'
import { parseComponentStyle, parseLayerStyle, parseViewName } from './util/topoUtil'

export default {
  name: 'TopoRender',
  components: {},
  filters: {
    parseComponentStyle(item) {
      return parseComponentStyle(item)
    }
  },
  extends: TopoBase,
  props: {
    configData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      deviceId: null
    }
  },
  computed: {
    layerStyle() {
      if (!this.configData.layer.bgImage && !this.configData.layer.bgColor) {
        this.configData.layer.bgColor = 'transparent'
      }
      const styles = parseLayerStyle(this.configData.layer)
      return styles.join(';')
    }

  },
  created() {
    const param = this.$route.query
    this.deviceId = param.deviceId
  },
  methods: {
    parseView(component) {
      return parseViewName(this.deviceId, component)
    },
    doClickComponent(component) {
      for (let i = 0; i < component.action.length; i++) {
        const action = component.action[i]
        if (action.type === 'click') {
          this.handleComponentActuib(action)
        }
      }
    },
    doDbClickComponent(component) {
      for (let i = 0; i < component.action.length; i++) {
        const action = component.action[i]
        if (action.type === 'dblclick') {
          this.handleComponentActuib(action)
        }
      }
    },
    handleComponentActuib(action) {
      if (action.action === 'visible') {
        if (action.showItems.length > 0) {
          action.showItems.forEach(identifier => {
            this.showComponent(identifier, true)
          })
        }
        if (action.hideItems.length > 0) {
          action.hideItems.forEach(identifier => {
            this.showComponent(identifier, false)
          })
        }
      } else if (action.action === 'util') {
        this.sendFun(action)
      }
    },
    showComponent(identifier, visible) {
      console.log('show:' + identifier + ',visible:' + visible)
      const spirits = this.$refs['spirit']
      for (let i = 0; i < spirits.length; i++) {
        const spirit = spirits[i]
        if (spirit.detail.identifier === identifier) {
          spirit.detail.style.visible = visible
          break
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.topo-render {

  .topo-render-wrapper {
    position: absolute;
  }

  .topo-render-wrapper-clickable {
    cursor: pointer;
  }
}
</style>

